<template>
  <div class="main-map-chart" ref="dataMap" style="width: 100%; height: 100%" />
</template>
<script>
import zm from '@/assets/json/zm.json'
let chart = null
export default {
  props: {
    title: String,
    list: Array
  },
  data() {
    return {
      config: {}
    }
  },
  methods: {
    initChart() {
      if (null != chart && undefined != chart) {
        chart.dispose()
      }
      this.$echarts.registerMap('zm', { geoJSON: zm })
      chart = this.$echarts.init(this.$refs.dataMap)
      this.setOptions()
    },
    setOptions() {
      let option = {
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: function (e, t, n) {
            return 0.5 == e.value ? e.name + '：有疑似病例' : e.seriesName + '<br />' + e.name + '：' + e.value + '人'
          }
        },
        title: {
          text: this.title,
          left: 'center',
          fontWeight: 'bolder',
          fontSize: 24,
          color: '#fff'
        },
        visualMap: {
          min: 0,
          max: 100,
          left: 26,
          bottom: 40,
          showLabel: !0,
          color: 'rgba(255,255,255,0.7)',
          // 图例
          pieces: [
            {
              gt: 40,
              label: '> 40 人',
              color: '#5D0773'
            },
            {
              gte: 30,
              lte: 40,
              label: '30 - 40人',
              color: '#26254F'
            },
            {
              gte: 20,
              lt: 30,
              label: '20 - 30 人',
              color: '#2D2D83'
            },
            {
              gt: 10,
              lt: 20,
              label: '10 - 20 人',
              color: '#2B4AD0'
            },
            {
              gte: 0,
              lt: 10,
              label: '0 - 10 人',
              color: '#394064'
            }
          ],
          show: !0
        },
        geo: {
          map: 'zm',
          roam: true, // 开启缩放和平移
          scaleLimit: {
            min: 0.8, // 最小缩放
            max: 1 // 最大缩放
          },
          zoom: 1.23, // 当前视角的缩放比例
          top: 50,
          label: {
            show: true,
            fontSize: '14',
            color: 'rgba(255,255,255,0.7)'
          },
          itemStyle: {
            areaColor: '#323c48',
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)', // 外发光
            borderColor: 'rgba(0, 0, 0, 0.2)'
          },
          emphasis: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: '#1E1D3C'
            }
          }
        },
        series: [
          {
            name: '确诊病例',
            type: 'map',
            geoIndex: 0,
            data: this.list
          }
        ]
      }
      chart.setOption(option)
    }
  },
  watch: {
    list: {
      handler(newValue, oldValue) {
        if (oldValue != newValue) {
          this.setOptions()
        }
      },
      deep: true
    }
  }
}
</script>